<!--融资申请贷款界面-->
<template>
    <div class="details-box2">
        <img :src="icon" alt="" height="100px">
        <div class="title">
            <h1>{{ FinaceUserDetails.bankName }}</h1>
        </div>
        <div class="introduce">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ FinaceUserDetails.introduce }}
        </div>

        <div class="title">
            <br />
            <strong>请选择个人贷款还是组合贷款</strong><br />
            <el-button type="success" @click="individual">个人贷款</el-button>
            <el-button type="success" @click="combination">组合贷款</el-button>
        </div>

        <!--单人贷款 -->
        <el-dialog title="单人借贷" v-model="showIndividual">
            <el-form v-model="FinaceUserDetails">
                <el-form-item label="姓名：" prop="name">
                    <el-input v-model="FinaceUserDetails.name"></el-input>
                </el-form-item>
                <el-form-item label="融资额度：" prop="money">
                    <el-input v-model="FinaceUserDetails.money"></el-input>
                </el-form-item>
                <el-form-item label="利息：" prop="rate">
                    <!-- <el-input v-model="FinaceUserDetails.rate"></el-input> -->
                    {{ FinaceUserDetails.rate }}
                </el-form-item>
                <el-form-item label="意向借款期：" prop="repayment">
                    <el-select v-model="value" placeholder="意向借款期：">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式：" prop="phone">
                    <el-input v-model="FinaceUserDetails.phone"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" prop="idNum">
                    <el-input v-model="FinaceUserDetails.idNum"></el-input>
                </el-form-item>
                <el-form-item label="上传材料：" prop="photo">
                    <el-upload class="upload-demo" drag action="http://localhost:8090/file/upload" :headers=head
                        :show-file-list="false" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="FinaceUserDetails.photo !== '' && FinaceUserDetails.photo !== undefined"
                            :src="FinaceUserDetails.photo" class="avatar" style="height: 100px;" />
                        <el-icon v-else class="avatar-uploader-icon" style="width: 200px;">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <el-button @click="handelCancel">取 消</el-button>
            <el-button @click="handleApplyOne">申请</el-button>
        </el-dialog>

        <!-- 组合贷款 -->
        <el-dialog title="组合贷款" v-model="showCombination" width="580px">
            <el-form v-model="UserDetailsMulti" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- 综合信息 -->
                <strong style="color: green">申请融资信息：</strong>
                <el-form-item label="融资额度：" prop="money">
                    <el-input v-model="UserDetailsMulti.money"></el-input>
                </el-form-item>
                <el-form-item label="利息：" prop="rate">
                    <!-- <el-input v-model="UserDetailsMulti.rate"></el-input> -->
                    {{ UserDetailsMulti.rate }}
                </el-form-item>
                <el-form-item label="意向借款期：" prop="repaymentPeriod">
                    <el-select v-model="value" placeholder="意向借款期：">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 用户1 -->
                <strong style="color: green">用户1：</strong>
                <el-form-item label="姓名：" prop="realName">
                    <el-input v-model="UserDetailsMulti.realName"></el-input>
                </el-form-item>
                <el-form-item label="联系方式：" prop="phone">
                    <el-input v-model="UserDetailsMulti.phone"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" prop="idNum">
                    <el-input v-model="UserDetailsMulti.idNum"></el-input>
                </el-form-item>
                <!-- 用户2 -->
                <strong style="color: green">用户2：</strong>
                <el-form-item label="姓名：" prop="combinationName1">
                    <el-input v-model="UserDetailsMulti.combinationName1"></el-input>
                </el-form-item>
                <el-form-item label="联系方式：" prop="combinationPhone1">
                    <el-input v-model="UserDetailsMulti.combinationPhone1"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" prop="combinationIdnum1">
                    <el-input v-model="UserDetailsMulti.combinationIdnum1"></el-input>
                </el-form-item>

                <!-- 用户3 -->
                <strong style="color: green">用户3：</strong>
                <el-form-item label="姓名：" prop="combinationName2">
                    <el-input v-model="UserDetailsMulti.combinationName2"></el-input>
                </el-form-item>
                <el-form-item label="联系方式：" prop="combinationPhone2">
                    <el-input v-model="UserDetailsMulti.combinationPhone2"></el-input>
                </el-form-item>
                <el-form-item label="身份证号：" prop="combinationIdnum2">
                    <el-input v-model="UserDetailsMulti.combinationIdnum2"></el-input>
                </el-form-item>
                <el-form-item label="上传材料：" prop="photo">
                    <el-upload class="upload-demo" drag action="http://localhost:8090/file/upload" :headers=head
                        :show-file-list="false" :on-remove="handleRemove" :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                        <img v-if="FinaceUserDetails.photo !== '' && FinaceUserDetails.photo !== undefined"
                            :src="FinaceUserDetails.photo" class="avatar" style="height: 100px;" />
                        <el-icon v-else class="avatar-uploader-icon" style="width: 200px;">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handelCancel">取 消</el-button>
                <el-button type="success" @click="handleApplyMulti">申请</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import type { UploadProps } from 'element-plus'
import {
    selectFinaceUser,
    addFinance,
    addFinanceMulti,
} from "@/api/finance";
import { ref } from "vue";
import { useRouter } from "vue-router";
import store from "@/store";
import { ElMessage } from "element-plus";
const router = useRouter();
const FinaceUserDetails = ref({
    name: '',
    idNum: '',
    phone: '',
    money: '',
    rate: '',
    repaymentPeriod: '',
    photo: ''
});
const options = ref([
    { value: '6', label: '6个月' },
    { value: '12', label: '一年' },
    { value: '24', label: '两年' },
    { value: '36', label: '三年' },
])
const value = ref(options.value[0].value)
const icon = ref('');
const showIndividual = ref(false);
const showCombination = ref(false);
const head = ref(
    {
        "Authorization": store.state.token
    })
const UserDetailsMulti = ref({
    money: '',
    rate: '',
    repaymentPeriod: '',
    realName: '',
    phone: '',
    idNum: '',
    combinationName1: '',
    combinationPhone1: '',
    combinationIdnum1: '',
    combinationName2: '',
    combinationPhone2: '',
    combinationIdnum2: '',
    fileInfo: ''
})

const load = () => {
    if (store.state.bankInfo.data == null || store.state.bankInfo.data == '') {
        router.push({ name: 'Financing' })
        return
    }
    UserDetailsMulti.value.money = ''
    UserDetailsMulti.value.rate = ''
    UserDetailsMulti.value.repaymentPeriod = ''
    UserDetailsMulti.value.realName = ''
    UserDetailsMulti.value.phone = ''
    UserDetailsMulti.value.idNum = ''
    UserDetailsMulti.value.combinationName1 = ''
    UserDetailsMulti.value.combinationPhone1 = ''
    UserDetailsMulti.value.combinationIdnum1 = ''
    UserDetailsMulti.value.combinationName2 = ''
    UserDetailsMulti.value.combinationPhone2 = ''
    UserDetailsMulti.value.combinationIdnum2 = ''
    UserDetailsMulti.value.fileInfo = ''
    UserDetailsMulti.value = store.state.bankInfo.data
    UserDetailsMulti.value.realName = store.state.loginInfo.realName
    FinaceUserDetails.value.photo = ''
    FinaceUserDetails.value = store.state.bankInfo.data
    FinaceUserDetails.value.name = store.state.loginInfo.realName
    FinaceUserDetails.value.idNum = store.state.loginInfo.identityNum
    FinaceUserDetails.value.phone = store.state.loginInfo.phone
    icon.value = store.state.bankInfo.icon
}
load()


//个人贷款
const individual = () => {
    showIndividual.value = true
}

//组合贷款
const combination = () => {
    showCombination.value = true
}

//个人借款申请
const handleApplyOne = () => {
    console.log(value.value)
    if (FinaceUserDetails.value.name == '' || FinaceUserDetails.value.phone == '' || FinaceUserDetails.value.idNum == '' || FinaceUserDetails.value.money == '' || FinaceUserDetails.value.rate == '' || value.value === '' || FinaceUserDetails.value.photo == undefined || FinaceUserDetails.value.photo == '') {
        ElMessage.error('请填写完整信息')
    } else {
        let newFinance = {
            name: FinaceUserDetails.value.name,
            idNum: FinaceUserDetails.value.idNum,
            phone: FinaceUserDetails.value.phone,
            money: FinaceUserDetails.value.money,
            rate: FinaceUserDetails.value.rate,
            repayment: value.value,
            fileInfo: FinaceUserDetails.value.photo,
            bankId: FinaceUserDetails.value.bankId
        }
        console.log(newFinance)
        addFinance(newFinance).then(res => {
            if (res.flag) {
                ElMessage.success('申请成功')
                showIndividual.value = false
                load()
            } else {
                ElMessage.error('申请失败')
            }
        })
    }

}

//文件上传
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    console.log(response);
    FinaceUserDetails.value.photo = response.data;
    UserDetailsMulti.value.fileInfo = response.data
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

//删除文件
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
    console.log(file, uploadFiles)
}

//取消申请
const handelCancel = () => {
    showIndividual.value = false
    showCombination.value = false
    load()
}


//组合贷款
const handleApplyMulti = () => {
    if (UserDetailsMulti.value.money == '' || UserDetailsMulti.value.rate == '' || UserDetailsMulti.value.repaymentPeriod == '' || UserDetailsMulti.value.realName == '' || UserDetailsMulti.value.phone == '' || UserDetailsMulti.value.idNum == '' || UserDetailsMulti.value.combinationName1 == '' || UserDetailsMulti.value.combinationPhone1 == '' || UserDetailsMulti.value.combinationIdnum1 == '' || UserDetailsMulti.value.combinationName2 == '' || UserDetailsMulti.value.combinationPhone2 == '' || UserDetailsMulti.value.combinationIdnum2 == '' || UserDetailsMulti.value.fileInfo == ''
        || UserDetailsMulti.value.fileInfo == undefined || UserDetailsMulti.value.fileInfo == '' || UserDetailsMulti.value.fileInfo == null || UserDetailsMulti.value.fileInfo == undefined) {
        ElMessage.error('请填写完整信息')
    } else {
        let newFinance = {
            money: UserDetailsMulti.value.money,
            rate: UserDetailsMulti.value.rate,
            realName: UserDetailsMulti.value.realName,
            phone: UserDetailsMulti.value.phone,
            idNum: UserDetailsMulti.value.idNum,
            repayment: value.value,
            combinationName1: UserDetailsMulti.value.combinationName1,
            combinationPhone1: UserDetailsMulti.value.combinationPhone1,
            combinationIdnum1: UserDetailsMulti.value.combinationIdnum1,
            combinationName2: UserDetailsMulti.value.combinationName2,
            combinationPhone2: UserDetailsMulti.value.combinationPhone2,
            combinationIdnum2: UserDetailsMulti.value.combinationIdnum2,
            fileInfo: UserDetailsMulti.value.fileInfo,
            bankId: FinaceUserDetails.value.bankId
        }
        console.log(newFinance)
        addFinanceMulti(newFinance).then(res => {
            if (res.flag) {
                ElMessage.success('申请成功')
                showCombination.value = false
                load()
            } else {
                ElMessage.error('申请失败')
            }
        })
    }
}

</script>

<style lang="scss" scoped>
.details-box2 {
    text-align: left;
    color: #212020;
    width: 1100px;
    margin: 10px auto;
    background: #fff;
    min-height: 100%;
    height: auto;
    padding: 10px 20px;
    background-size: 30%;

    img {
        width: 300px;
        height: 300px;
        float: left;
        margin-right: 20px;
    }

    .title {
        font-size: 18px;
        line-height: 40px;
    }

    .introduce {
        line-height: 25px;
        max-height: 100px;
    }

    .item-content {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 30px;
        line-height: 30px;

        .item-title {
            font-weight: bold;
        }

        .item-text {}
    }

    .info {
        position: relative;
        width: 340px;
        height: 300px;
        float: left;

        .title {
            font-size: 22px;
            font-weight: bold;
        }

        .content {
            height: 100px;
        }

        .price {
            color: red;
            font-size: 25px;
            font-weight: bold;
        }

        .time {
            margin-top: 10px;
            color: #999;

            .createtime {
                float: left;
            }

            .updatetime {
                float: right;
            }
        }
    }

    .operation {
        position: absolute;
        bottom: 0;
        margin-top: 20px;

        .like,
        .collection,
        .comment {
            display: inline-block;
            width: 30px;
            margin-right: 30px;

            img {
                margin: 0;
                width: 20px;
                height: 20px;
                border-radius: 6px;
            }
        }
    }

    .add-shopcart {
        position: absolute;
        right: 20px;
        bottom: 5px;
    }
}

.btn-style {
    display: flex;
    justify-content: center;
}
</style>